<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <h1>{{ $store.state.count }}</h1>
    <!-- <p>{{$store.getters.listCount}}</p> -->
    <button @click="countAdd">计数值+1</button>
    <button @click="countAddStep(5)">计数值+5</button>
    <button @click="countReduce">计数值-1</button>
    <van-button type="danger">按钮</van-button>
    <!-- <ul>
      <li v-for="item in $store.state.list" :key="item._id">
        {{ item.name }}-----------
        <button @click="buyHandle">购买</button>
      </li>
    </ul>
    <keep-alive>
      <button v-show="isShowLoadMore" @click="loaData">加载数据</button>
    </keep-alive>-->

    <!-- <img :src="img" alt="巴卫" /> -->
    <!-- <img alt="Vue logo" src="../assets/logo.png" />
    <img :src="img" alt="巴卫" />
    <HelloWorld msg="Welcome to Your Vue.js App" />-->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import xx from '../assets/images/4.jpeg'
import { mapMutations } from 'vuex'
// import { Button } from 'vant'

export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  data() {
    return {
      // img: require('../assets/images/4.jpeg')
      // img: xx,
      // isShowLoadMore: true
    }
  },
  methods: {
    ...mapMutations(['buy']),
    countAdd() {
      // commit 操作会传递两个参数 type payload
      //  type表示mutation中的名字
      //  payload(载荷)表示参数
      this.$store.commit('plus')
    },
    countAddStep(buchang) {
      this.$store.commit('plus', buchang)
    },
    countReduce() {
      this.$store.commit('reduce')
    }
    /* loaData() {
      if (this.$store.state.pages < this.$store.state.page) {
        this.isShowLoadMore = false
        return
      }
      this.$store.dispatch('loadData', { page: this.$store.state.page })
    },
    buyHandle() {
      // this.$store.commit('buy')
      this.buy()
    } */
  }
}
</script>
<style scoped>
/* 轮播 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #7708c2;
}
img {
  max-width: 100%;
}
ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
ul li {
  flex: 1;
  flex-direction: row;
  height: 50px;
  display: flex;
  padding: 0.1rem 0.2rem;
}
button {
  width: 100px;
}
</style>
